<template>
  <div class="home">
    <h3>MxFormGroup</h3>
    <el-row :gutter="12">
      <el-col :span="6">
        <pre>{{ JSON.stringify(fieldsConfig, null, 2) }}</pre>
      </el-col>
      <el-col :span="14" :offset="0">
        <MxFormGroup
          :fieldsConfig="fieldsConfig"
          v-model="formData"
          label-width="120px"
          size="mini"
        ></MxFormGroup>
      </el-col>
      <el-col :span="4">
        <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import MxFormGroup from '@/components/MxFormGroup.vue';
export default {
  name: 'Home',
  components: { MxFormGroup },
  data() {
    const fieldsConfig = [
      {
        tag: 'el-input',
        label: 'nickname',
        prop: 'name',
        defaultValue: 'x',
        rules: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        slots: [
          (h) => {
            return h('template', { slot: 'prepend' }, 'Http://');
          },
        ],
      },
      {
        tag: 'el-select',
        label: 'gender',
        prop: 'gender',
        dicType: 'dic_gender',
        defaultValue: '1',
        attrs: {
          disabled: false,
        },
      },
      {
        tag: 'el-radio-group',
        label: 'gender',
        prop: 'gender2',
        dicType: 'dic_gender',
        defaultValue: '1',
      },
      {
        tag: 'el-checkbox-group',
        label: 'gender',
        prop: 'gender3',
        dicType: 'dic_gender',
        defaultValue: [],
      },
    ];
    return {
      fieldsConfig,
      formData: fieldsConfig.reduce((p, c) => {
        return {
          ...p,
          [c.prop]: c.defaultValue,
        };
      }, {}),
    };
  },
};
</script>

